---
title: Cropper Types
sidebar_position: 3
---

import { CropperTypesExample } from '../../src/components/examples/CropperTypesExample';
import { FixedCropperTypeExample } from '../../src/components/examples/FixedCropperTypeExample';

# Cropper Types

The croppers are different. The mission of this library is give the developer possibility to create
not only croppers with different appearance, but also with different behavior.

Despite the variety of different croppers they can be classified on the three groups:
 - [Classic](/docs/guides/cropper-types#classic-cropper)
 - [Fixed](/docs/guides/cropper-types#fixed-cropper)
 - [Hybrid](/docs/guides/cropper-types#hybrid-cropper)

If you able to create all of them, you will able to create almost any of existing and even possible croppers.


## Classic Cropper

The classic cropper is the cropper, where the major way to choice an area is the resizing and moving the stencil. Depending on specific cropper
use may or may not resize and move image, but it's always the minor way.

<CropperTypesExample
	src="/react-advanced-cropper/img/images/pexels-photo-3761018.jpeg"
/>

Examples: [Yandex](https://www.yandex.com).


### Implementation

The most basic cropper configuration will give you the **classic** cropper, that is displayed above.
```jsx
<Cropper src={img} />
```

## Fixed Cropper

The fixed cropper has the static stencil. It doesn't have handlers, it can't be moved or resized and it have a fixed size. An user can only change the image size and position.

<FixedCropperTypeExample
	size={'medium'}
	src="/react-advanced-cropper/img/images/photo-1583172332547-c768b4e2f5ff.jpg"
	stencilProps={{
		handlers: false,
		lines: false,
		movable: false,
		resizable: false,
	}}
	stencilSize={{
		width: 400,
		height: 400
	}}
	imageRestriction="stencil"
/>

Examples: [Twitter](https://www.twitter.com), [Instagram](https://www.instagram.com).

### Implementation

The recommended implementation is presented below:
```tsx
import { FixedCropper, ImageRestriction } from 'react-advanced-cropper'
```
```tsx
<FixedCropper
	src={img}
	stencilProps={{
		handlers: false,
		lines: false,
		movable: false,
		resizable: false,
	}}
	stencilSize={{
		width: 300,
		height: 300
	}}
	imageRestriction={ImageRestriction.stencil}
/>
```

Let's describe the changes:

1. The passing specified stencil props is needed to get rid of handlers and lines and disable the stencil moving and stencil resizing.

2. The setting stencil size is the most reliable way to make stencil preserve it position, size and aspect ratio.
It defines a real stencil size in pixels of the stencil element, so be sure, that the cropper container is always bigger than the specified size.

3. Image restriction is set to `ImageRestriction.stencil` (`"stencil"`) to allow the user to crop any part of image. If you leave it default ('fit-area') the user will be not able
to crop some image areas.

## Hybrid Cropper

The hybrid cropper is the cropper that has semi-fixed stencil, i.e. user able to
change its size and position, but it always tries to return to some default position and return some default size.

Examples: [Telegram](https://www.telegram.org).

### Implementation

The **fixed hybrid** is the cropper type, that is very similar to the **fixed cropper**, but user is able to change
the size and position of cropper.

To implement the hybrid cropper just remove `stencilProps` from the previous example:

```tsx
<FixedCropper
	src={img}
	stencilSize={{
		width: 280,
		height: 280
	}}
	imageRestriction={ImageRestriction.stencil}
/>
```

<FixedCropperTypeExample
	src="/react-advanced-cropper/img/images/photo-1583853287541-6e82b3d5ea12.jpg"
	stencilSize={{
		width: 280,
		height: 280
	}}
	imageRestriction="stencil"
/>

